<template>
  <view class="shop-settings">
    <!-- 同步配送门店 -->
    <view class="setting-item">
      <view class="label">同步配送门店</view>
      <input placeholder="请输入" v-model="syncStore" />
    </view>

    <!-- 营业时间 -->
    <view class="setting-item">
      <view class="label">营业时间</view>
      <picker mode="time" :value="time" @change="handleTimeChange">
        <view class="picker">{{ time }}</view>
      </picker>
    </view>

    <!-- 门店公告 -->
    <view class="setting-item setting-item-notice">
      <view class="label">门店公告</view>
      <textarea placeholder="请输入内容" v-model="storeAnnouncement" />
    </view>

    <!-- 其他设置 -->
    <view class="other-settings">
      <view class="setting-item">
        <view class="label">门店起送费</view>
        <input placeholder="请输入" v-model="startFee" />
      </view>
      <view class="setting-item">
        <view class="label">客服无距离（公里）</view>
        <input placeholder="请输入" v-model="serviceDistance" />
      </view>
      <view class="setting-item">
        <view class="label">收费方式</view>
        <picker mode="selector" :value="chargeType" :range="chargeTypes" @change="handleChangeType">
          <view class="picker">{{ chargeType }}</view>
        </picker>
      </view>
      <view class="setting-item">
        <view class="label">兜底配送费</view>
        <input placeholder="请输入" v-model="bottomDeliveryFee" />
      </view>
      <view class="setting-item">
        <view class="label">接单模式</view>
        <radio-group v-model="orderMode">
          <label>
            <radio value="auto" />自动接单
          </label>
          <label>
            <radio value="manual" />手动接单
          </label>
        </radio-group>
      </view>
      <view class="setting-item">
        <view class="label">包装费</view>
        <radio-group v-model="packagingFeeMode">
          <label>
            <radio value="byQuantity" />按数量收费
          </label>
          <label>
            <radio value="fixedAmount" />固定金额
          </label>
        </radio-group>
      </view>
      <view class="setting-item">
        <view class="label">配置主播号</view>
        <input placeholder="请输入" v-model="anchorNumber" />
      </view>
    </view>

    <!-- 保存按钮 -->
    <button class="save-button" @click="saveSettings">保存</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      syncStore: '',
      time: '09:00',
      storeAnnouncement: '',
      startFee: '',
      serviceDistance: '',
      chargeType: '配送范围',
      chargeTypes: ['配送范围', '自提'],
      bottomDeliveryFee: '',
      orderMode: 'auto',
      packagingFeeMode: 'byQuantity',
      anchorNumber: ''
    };
  },
  methods: {
    handleTimeChange(e) {
      this.time = e.detail.value;
    },
    handleChangeType(e) {
      this.chargeType = e.detail.value;
    },
    saveSettings() {
      // Save settings logic here
    }
  }
};
</script>

<style scoped>
.shop-settings {
  padding: 20px;
}

.setting-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-item-notice{
    display: block;
}

.setting-item input{
    text-align: right;
}

.label {
  font-weight: bold;
  margin-bottom: 5px;
}

.picker {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

.save-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
}
</style>